<template>
  <!--雷达图-->
  <div
    :style="{width:width,height:height}"
  ></div>
</template>

<script>
export default {
  name: 'RadarChart',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    radarChartName:{
      type: Array,
      default: ()=>[]
    },
    radarChartData:{
      type: Array,
      default: ()=>[]
    }
  },
  watch: {
    radarChartData: {
      deep: true,
      handler() {
        this.initChart()
      }
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      let that = this
      this.chart = this.$echarts.init(this.$el)
      let option = {
        tooltip: {
          formatter(e) {
            if (e.data) {
              return `${that.radarChartName[0]}: ${e.data.value[0]}<br>${that.radarChartName[1]}: ${e.data.value[1]}<br>${that.radarChartName[2]}: ${e.data.value[2]}<br>${that.radarChartName[3]}: ${e.data.value[3]}<br>${that.radarChartName[4]}: ${e.data.value[4]}`
            }
          }
        },
        radar: {
          center: ['50%', '60%'],
          // radius: 95,//缩放
          shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              fontSize:'14',
              borderRadius: 3,
              padding: [16, 16]
            },
            // formatter(value) {
            //   if (value) {
            //     let list = value.split('')
            //     let result=""
            //     const p = /[a-z]/i
            //     for (let i=1; i<= list.length;i++) {
            //       if (p.test(list[i-1])) {
            //         if (!p.test(list[i])) {
            //           result += list[i-1]+'\n'
            //         } else {
            //           result += list[i-1]
            //         }
            //       } else if (i === Math.floor(list.length/2)) {
            //         result += list[i-1]+'\n'
            //       } else {
            //         result += list[i-1]
            //       }
            //     }
            //     return result
            //   }
            // }
          },
          nameGap:'10',
          indicator: [
            {name: this.radarChartName[0], max: 100},
            {name: this.radarChartName[1], max: 100},
            {name: this.radarChartName[2], max: 100 },
            {name: this.radarChartName[3], max: 100},
            {name: this.radarChartName[4], max: 100}
          ],
          splitArea: {
            areaStyle: {
              color: ['rgba(25,110,200,0.4)',
                'rgba(25,110,200,0.6)',
              ]
            }
          },
          axisLine: { // 指向外圈文本的分隔线样式
            show: false
          },
          splitLine: {
            show: false,
          }
        },
        series: [{
          type: 'radar',
          areaStyle: {
            normal: {
              color: 'rgb(73,128,186)'
            }
          },
          symbolSize: 1,
          lineStyle: {
            normal: {
              color:'rgb(0, 128, 255)',
              width: 2
            }
          },
          data: [{
            value: this.radarChartData,
            label: {
              position: 'inside',
              show: true,
              formatter: (params) => {
                return params.value
              },
              fontSize: 14,
              color: '#dddddd'
            },
            itemStyle: {
              fontSize: 20
            }
          }]
        }]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
